<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>流程审批</title>
    <script src="../../assets/js/config.js"></script>
</head>
<body>
<!-- 页面加载loading -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">状态:</label>
                        <div class="layui-input-inline">
                            <select name="status">
                                <option value="">全部</option>
                                <option value="2">待办</option>
                                <option value="1">已通过</option>
                                <option value="0">未通过</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button id="search" class="layui-btn icon-btn" lay-filter="userTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="userTable" lay-filter="userTable"></table>
        </div>
    </div>
</div>
<script type="text/html" id="tableBar">
    {{d.status=='2'?'<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="approve">审批</a>':
    '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看</a>'}}
</script>
<script>
    let url, instanceId;
    layui.use(['layer', 'form', 'table', 'util', 'xmSelect'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        /* 渲染表格 */
        var insTb = table.render({
            elem: '#userTable',
            url: '/office/flowStepApprove/queryTaskList',
            page: true,
            method: 'post',
            cellMinWidth: 100,
            request: {
                pageName: 'page',
                limitName: 'rows',
            },
            height: $(window).height() - 100,
            cols: [[
                {type: 'numbers'},
                {field: 'creator', title: '发起人', sort: false},
                {field: 'title', title: '流程名称', sort: false},
                {
                    field: 'instanceCrtDate', title: '发起时间', sort: false, templet: function (value) {
                        return dateFormatter(value.instanceCrtDate)
                    }
                },
                {
                    field: 'status', title: '状态', templet: function (value) {
                        let status = value.status == 1 ? '同意' : (value.status == 0 ? '不同意' : '处理中');
                        return status;
                    }, sort: false, width: 100
                },
                {
                    title: '操作', toolbar: '#tableBar', templet: function (row) {
                        if (row.status == 2) {
                            return `<button class="layui-btn layui-btn-sm" onclick="openApprove('${row.instanceId}','${row.content}',1)">审批</button>`
                        } else {
                            return `<button class="layui-btn layui-btn-sm" onclick="openApprove('${row.instanceId}','${row.content}',0)" >查看</button>`
                        }
                    }, align: 'center', minWidth: 200
                },

            ]],
            parseData: function (res) {
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.obj.total,
                    "data": res.obj.rows
                }
            }
        });
        table.on('tool(userTable)', function (obj) {
            let row = obj.data;
            if (obj.event === 'approve') {
                openApprove(row.instanceId, row.content)
            } else if (obj.event === 'detail') {
                openApprove(row.instanceId, row.content)
            }
        });

        /* 表格搜索 */
        form.on('submit(userTbSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });

        function openApprove(id, content) {
            instanceId = id;
            url = "/office/flowStepApprove/approve";
            openDialog("../" + content + ".html?instanceId=" + id, '流程审批', true);
        }

    });

    /**提交审核结果*/
    function submitApprove() {
        let param = {};
        param.comment = $("[name='comment']").val();
        param.status = $('input[name="status"]:checked').val();
        if (typeof param.status == 'undefined') {
            showAlert('请给出审核意见！');
            return false;
        }
        if(param.status==0&&param.comment==''){
            showAlert('请填写不同意原因！');
            return false;
        }
        if(param.status==-1&&param.comment==''){
            showAlert('请填写退回原因！');
            return false;
        }
        param.person = getUserId();
        param.instanceId = instanceId;
        if (param.status == -1) {
            returnFlowInstance();
        } else {
            layer.confirm('确认提交', function () {
                $.post("/office/flowStepApprove/approve", param, function (res) {
                    if (res.code == 200) {
                        closeDialog();
                        showMsg(res.msg);
                        $("#search").click();
                    } else {
                        showAlert(res.msg);
                    }
                });
            })
        }
    }

    function returnFlowInstance() {
        let params = {};
        params.userId = getUserId();
        params.userName = getUserName();
        params.instanceId = instanceId;
        params.reason = $("[name='reason']").val();
        layer.confirm('确认退回流程', function () {
            $.post('/office/flowStepApprove/returnFlowInstance', params, function (res) {
                if (res.code == 200) {
                    showMsg(res.msg);
                    closeDialog();
                    $("#search").click();
                    try {
                        parent.search();
                    } catch (e) {

                    }
                } else {
                    showAlert(res.msg);
                }
            })
        })
    }


</script>
</body>
</html>